<template>
<div :class="wrapClass" :id="id" style="width: 100%; height: 100%;"></div>
</template>

<script>
import {
  COLORS
} from '@/constants'
import mixins from './mixins';
import $ from 'jquery';
export default {
  name: 'smallPie',
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: 'sPie'
    },
    wrapClass: String,
    name: {
      type: String,
      default: ''
    },
    legend: {
      type: Array,
      default: () => []
    },
    xLabel: {
      type: Array,
      default: () => []
    },
    xValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    },
    percent: {
      type: Number || String,
      default: null
    },
    colorIndex: {
      type: Number,
      default: 0
    },
    tipName: String
  },

  computed: {
    getDefOptions() {
      let defOptions = {
        // color: COLORS[colorIndex],
        legend: {
          show: false,
        },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: `${this.name} <br/>{b}: {c} ({d}%)`
        // },
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          enterable: true,
          // position: 'inside',
          hideDelay: 0,
          position: function (point, params, dom, rect, size) {
            let cell = $(dom).parent().parent().parent().siblings().find('.cell-chart');
            cell.each((index, item) => {
              let children = $(item).children();
              if (children[1]) {
                $(children[1]).hide()
              }
            })
            let css = {};
            let obj = {};
            if ($(dom).height() > 220) {
              css['height'] = '220px';
              if ($(dom).width() > 703) {
                css['width'] = '703px'
              }
            } else if ($(dom).width() > 703) {
              css['width'] = '703px';
              if ($(dom).height() > 220) {
                css['height'] = '220px';
              }
            }
            obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = '10%';
            if (point[0] < 110 || point[0] > 900) { //鼠标在left
              obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = '10%';
            }
            $(dom).css(css)
            return obj
          },
          formatter: (params) => {
            console.log(params)
            return this.formatTipInfo(params)
          }
        },

        series: [{
            type: 'pie',
            radius: ['50%', '70%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              name: this.tipName,
              value: 100,
              itemStyle: {
                normal: {
                  color: '#292c33',
                  shadowBlur: 2,
                }
              }
            }],
            zlevel: 1
          },
          {
            name: 'main',
            type: 'pie',
            hoverAnimation: false,
            radius: ['50%', '70%'],
            data: [{
                // name: ,
                value: this.percent,
                label: {
                  show: true,
                  position: 'center',
                  fontSize: 14,
                  formatter: '{d}%'
                },
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: COLORS[this.colorIndex],
                    shadowBlur: 10,
                  }
                }
              },
              {
                value: 100 - this.percent,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ],
            zlevel: 2
          }
        ]
      };
      return Object.assign({}, defOptions, this.options);
    }
  },
  data() {
    return {
      myCharts: null
    }
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.myCharts.on('click', (params) => {
        // console.log(params);
      });
      this.handleResize(this.myCharts);
    }
  },
  methods: {
    formatTipInfo(params) {

      function handleTooltipClick() {
        console.log('点击了tooltip');
      }

      let htmlStr = "<div style='background: #282b3c; border-radius: 5px; padding: 20px; width: 200px;'>"
      htmlStr += `
        <div style="display: flex; border-bottom: 1px solid #ff6666; align-items: center; height: 28px;">
          <div style="width: 4px; height: 4px; position: relative; background: #ff6666"></div>
          <div style="font-size: 12px; color: #e6e9f5; margin-left: 5px;">${this.name}</div>
        </div>
      `
      console.log(this.legend)
      for (let i = 0, len = 3; i < len; i++) {
        htmlStr += `
          <a style="display: block; text-align: left; margin-top: 20px;" href="/power.html?title=${this.legend[i].mediaName}">
            <div style="color: #767e91; font-size: 12px; line-height: 1;">${this.legend[i].mediaName}</div>
            <div style="display: flex; margin-top: 10px; height: 16px; align-items: center;">
              <div style="color: #e6e9f5; width: 50px; font-size: 12px;">${this.tipName}</div>
              <div style="flex: 1; line-height: 16px; height: 5px; background-color: #3a3e57; border-radius: 5px; margin: 0 5px; position: relative;">
                <div style="position: absolute; left: 0; top: 0; bottom: 0; background: ${COLORS[this.colorIndex]}; width: ${this.legend[i].influence + '%'}"></div>
              </div>
              <div style="font-size: 12px; line-height: 16px; color: #767e91; text-align: right;position: relative; top:2px;">${this.legend[i].influence}</div>
            </div>
          </a>
        `;
      }
      htmlStr += "</div>"
      return htmlStr;
    }
  },
  watch:{
    getDefOptions:function(nVal){
       this.myCharts.setOption(options);
    },
    deep: true,
  }
}
</script>
